<template>
	<view class="content">
		<!-- 头部 -->
		<view class="top">
			<!-- 下拉框 -->
			<uni-data-select
			  v-model="value"
        :localdata="range"
        @change="change"
				class="SelectBox"
			>
			</uni-data-select>
			<!-- 告警时间 -->
			 <view class="Databtn">
			 	<uni-datetime-picker startDate="开始日期" endDate="结束日期" v-model="alarmtime" @change="changeLog" />
			 </view>
		
			 <!-- 搜索按钮 -->
			<button class="topBtn" @click="searchAlarm">
				 <uni-icons type="search" size="20" color="#fbfbfc" style="margin-right: 2rpx;"></uni-icons>
			</button>
		</view>
		<!-- 告警信息列表 -->
		<view class="alarmList">
			<ul v-if="alarmArry.length>0">
				<li class="alamBttomLi" v-for="(item,key) in pagedAlarmArry" :key="item.id">
					<image src="../../static/images/home/red.png" mode="" style="width: 32rpx;height: 32rpx;margin-left: 22rpx;"></image>
					<view class="alamBttomText">
						<text>{{item.robot_name}}  {{item.alarminfo}}</text>
						<text>{{item.alarmtime}}</text>
					</view>
				</li>
			</ul>
			<ul v-else  class="alamBttomLi1">
				<li>暂无数据</li>
			</ul>
		</view>
		<!-- 分页器 -->
		<view class="pageBox" v-if="totalItems > 0" >
		  <button class="Previous" @click="prevPage" :disabled="currentPage === 1"><uni-icons type="back" size="20"></uni-icons></button>
		  <view class="pagination" v-for="page in totalPages" :key="page">
		    <button class="paginationBtn"  @click="changeToPage(page)" :class="{ active: page === currentPage }">{{ page }}</button>
			</view>
		  <button class="Nextpage" @click="nextPage" :disabled="currentPage === totalPages"><uni-icons type="forward" size="20"></uni-icons></button>
		</view>
		
	</view>
</template>

<script>
	import {alamMessage} from '@/api/alam/alam.js'
	import {equipmentLion} from '@/api/equipment/equipment.js'
	import cookie from '../../cookie.js'
	
	export default{
		data(){
			return{
				robot_id:undefined,
				//选择的时间
				alarmtime:undefined,
				token:cookie.get('access_token'),
				secretKey:cookie.get('secretKey'),
				//机器人选择
				value:cookie.get('robotid'),
				text:cookie.get('robot_name'),
				range:[
					{value:"", text:""}
				],
				//被选中机器人的id
				selectedRobotId:cookie.get('robotid'),
				//机器人名称
				robot_name:cookie.get('robot_name'),
				//被选中的机器人
				ranges:{},
			
				//告警信息数组
				alarmArry:[],
				pageSize: 5, // 每页显示条数
				currentPage: 1, // 当前页码
			}
		},
		onLoad() {
			this.value=cookie.get('robotid'),
			//机器人名称
			this.text=cookie.get('robot_name'),
			this.selectedRobotId=cookie.get('robotid'),
			//机器人名称
			this.robot_name=cookie.get('robot_name'),
			this.robotList() //机器人切换
			this.alarm() //告警信息
			this.initPullDownRefresh(); // 初始化下拉刷新
		},
		mounted() {
			this.alarm() //告警信息
		},
		computed: {
		    totalItems() {
		      return this.alarmArry.length; // 总数据条数
		    },
		    totalPages() {
		      return Math.ceil(this.totalItems / this.pageSize); // 总页数
		    },
		    pagedAlarmArry() {
		      const start = (this.currentPage - 1) * this.pageSize;
		      const end = start + this.pageSize;
		      return this.alarmArry.slice(start, end); // 当前页的数据
		    },
		},
		methods:{
			initPullDownRefresh() {
			  uni.startPullDownRefresh(); // 主动触发下拉刷新
			},
			onPullDownRefresh() {
				this.alarmtime = ''; // 清空当前选择的时间
			  this.refreshData(); // 下拉刷新时执行相应的逻辑操作
			},
			refreshData() {
					// 下拉刷新时重新加载数据
					this.robotList() //机器人切换
					this.alarm() //告警信息
			
			    // 在1秒后停止下拉刷新
			    setTimeout(() => {
			      uni.stopPullDownRefresh();
			    }, 500);
			},
			//分页器
			prevPage() {
			  if (this.currentPage > 1) {
			    this.currentPage--;
			  }
			},
			nextPage() {
			  if (this.currentPage < this.totalPages) {
			    this.currentPage++;
			  }
			},
			changeToPage(page) {
			  if (page === '...') {
				  return;
				}
				this.currentPage = page;
			},
			//获取机器人信息
			robotList(){
				equipmentLion(this.token,this.secretKey).then(Response=>{
					Response.rows.map(item =>{
					  this.range = Response.rows.map(({ id, robot_name }) => ({ value: id, text: robot_name }));
					})
				})
			},
			//告警信息
			alarm(){
				alamMessage(this.token,this.secretKey,this.selectedRobotId,this.alarmtime).then(Response => {
					this.alarmArry = Response.rows
				})
			},
			//机器人选择
			change(e) {
				//保存选中机器人的id
				this.ranges = this.range.find(item => item.value === e)
				
				cookie.set('robotid',this.ranges.value)
				cookie.set('robot_name',this.ranges.text)
							
				this.selectedRobotId = this.ranges.value
				this.robot_name = this.ranges.text
				
				this.alarm() //告警信息
			},
			//时间选择器
			changeLog(e) {
				//截取时间年月日
				this.alarmtime = e.substring(0, 10)
			},
			//搜索
			searchAlarm(){
				this.robot_id = this.value
				this.alarm() //告警信息列表
			},
			
		}
	}
</script>

<style lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	page{
			background-color: #f5f5f5;
	}
	.content {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	}
	.top{
		width: 710rpx;
		margin-top: 44rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.SelectBox{
		width: 222rpx;
		height: 65rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}
	.SelectBox /deep/ .uni-icons{
		font-size: 0px !important;
	}
	.Databtn{
		width: 280rpx;
		height: 65rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		color: #999999;
		font-weight: 400;
		margin-left:18rpx;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.Databtn /deep/ .uni-icons{
		font-size: 0px !important;
	}
	.topBtn{
		width: 88rpx;
		height: 53rpx;
		background: #0F174F;
		border-radius: 27rpx;
		margin-left: 25rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.alarmList{
		width: 710rpx;
		height: 760rpx;
		background-color: rgba(255, 255, 255, 1);
		margin-top: 26rpx;
		border-radius: 12rpx;
		margin-bottom: 10rpx;
		padding-top: 24rpx;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
	}
	.alarmList /deep/	.uni-table-th{
		display: none;
	}
	.alarmList /deep/ .uni-table-td{
		padding: 0;
		height: 73rpx;
		border-bottom: 2rpx dashed #DCDADA;
	}
	.alamBttomLi{
		width: 100%;
		height: 73rpx;
		font-size: 22rpx;
		display: flex;
		align-items: center;
	}
	.alamBttomLi1{
		list-style: none;
		height: 80%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.alamBttomText{
		width: 612rpx;
		height: 100%;
		margin-left: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx dashed #dedcdc;
		font-family: 'SourceHanSansCN-Regular', sans-serif;
	}
	
	//分页器
	.pageBox{
		width: 455rpx;
		margin-top: 44rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
	}
	//上一页
	.Previous{
		width: 40rpx;
		height: 40rpx;
		background: #EDEDED;
		border: 1px solid #000000;
		// border-radius: 4rpx;
		font-size: 8rpx;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	//下一页
	.Nextpage{
		width: 40rpx;
		height: 40rpx;
		border: 1px solid #142150;
		// border-radius: 4rpx;
		font-size: 8rpx;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.paginationBtn{
		width: 40rpx;
		height: 40rpx;
		font-size: 16rpx;
		font-family: Myriad Pro;
		font-weight: 400;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
		border: 1px solid #142150;
	}
	.active{
		width: 40rpx;
		height: 40rpx;
		background: #142150;
		font-size: 16rpx;
		font-family: Helvetica;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>